import React, { PureComponent, HTMLAttributes, ReactNode } from 'react';
import classnames from 'classnames/dedupe';
import BasePropsType from './PropsType';
import createFromIconfont from './IconFont';

const INNER_SVG_PROPS = {
  width: '1em',
  height: '1em',
  fill: 'currentColor',
  viewBox: '0 0 32 32',
};

export type IconProps = {
  prefixCls?: string;
} & BasePropsType & HTMLAttributes<HTMLElement>;


class Icon extends PureComponent<IconProps, {}> {
  static displayName = 'Icon';

  static defaultProps: IconProps = {
    prefixCls: 'za-icon',
    theme: 'default',
    size: 'md',
    viewBox: INNER_SVG_PROPS.viewBox,
  };

  static createFromIconfont = createFromIconfont;

  render() {
    const { className, type, style, prefixCls, theme, size, children, component: SvgComponent, viewBox, ...rest } = this.props;
    const cls = classnames(prefixCls, className, {
      [`${prefixCls}--${type}`]: !!type,
      [`${prefixCls}--${theme}`]: !!theme,
      [`${prefixCls}--${size}`]: !!size,
    });

    const newProps = {
      className: cls,
      style,
      type,
      theme,
      size,
      ...rest,
    };

    let iconNode: ReactNode;
    // svg component > children by iconfont > type
    if (SvgComponent) {
      delete INNER_SVG_PROPS.viewBox;
      iconNode = (
        <i {...newProps}>
          <SvgComponent {...INNER_SVG_PROPS} viewBox={viewBox}>{children}</SvgComponent>
        </i>
      );
    } else if (children) {
      iconNode = (
        <i {...newProps}>
          <svg {...INNER_SVG_PROPS}>
            {children}
          </svg>
        </i>
      );
    } else if (type) {
      const MyIcon = Icon.createFromIconfont('//at.alicdn.com/t/font_1285036_9ze0vm44z57.js');// generated by iconfont.cn
      iconNode = (
        <MyIcon {...newProps} />
      );
    }
    return iconNode;
  }
}

export default Icon;
